<template>
    <div class="lzx_container">
        <div id="lastView"></div>
        <div id="prevView"></div>
        <div class="side">
            <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item :title="'新增构件（' + fomatResult.newItems.length + '）'" name="3">
                    <div
                        class="item"
                        v-for="newItem in fomatResult.newItems"
                        :data-oid="newItem.id"
                        @click="handleLocation('change', newItem.id)"
                        :key="newItem.index"
                    >
                        {{ newItem.name }}
                    </div>
                </el-collapse-item>
                <el-collapse-item :title="'修改构件（' + fomatResult.changeItems.length + '）'" name="1">
                    <div
                        class="item"
                        v-for="changeItem in fomatResult.changeItems"
                        :data-oid="changeItem.id"
                        @click="handleLocation('add', changeItem.id)"
                        :key="changeItem.index"
                    >
                        {{ changeItem.name }}
                    </div>
                </el-collapse-item>
                <el-collapse-item :title="'删除构件（' + fomatResult.deleteItems.length + '）'" name="2">
                    <div
                        class="item"
                        v-for="deleteItem in fomatResult.deleteItems"
                        :data-oid="deleteItem.id"
                        @click="handleLocation('delete', deleteItem.id)"
                        :key="deleteItem.index"
                    >
                        {{ deleteItem.name }}
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            infomationList: null,
            fomatResult: { changeItems: [], deleteItems: [], newItems: [] },
            activeNames: ['1'],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        };
    },
    mounted() {
        var previousId = this.$route.query.previousId,
            nowId = this.$route.query.nowId;
        console.log(previousId, nowId);
        let temp = {
            ver: '2.0',
            news: ['1739288535918240.271206', '1739288535918240.323403', '1739288535918240.323451'],
            newsNameMap: [
                {
                    '1739288535918240': {
                        '271206': 'window-1800 x 1400mm'
                    }
                },
                {
                    '1739288535918240': {
                        '323403': '桦树 3D'
                    }
                },
                {
                    '1739288535918240': {
                        '323451': '桦树 3D'
                    }
                }
            ],
            deletes: ['1844554864650240.394937', '1844554864650240.395168', '1844554864650240.395170'],
            deletesNameMap: [
                {
                    '1844554864650240': {
                        '394937': 'window-1740 x 1400mm'
                    }
                },
                {
                    '1844554864650240': {
                        '395168': '玻璃'
                    }
                },
                {
                    '1844554864650240': {
                        '395170': '玻璃'
                    }
                }
            ],
            changes: [
                {
                    A: '1844554864650240.327890',
                    B: '1739288535918240.327890',
                    AName: '100W - 277V',
                    BName: '100W - 277V',
                    changeAttributes: [
                        {
                            A: {
                                key: '_GeoFeature',
                                value: 'fd8ec0c19304a0e6527c4359fffe886c'
                            },
                            B: {
                                key: '_GeoFeature',
                                value: 'e35a6f23baa5c7c32df9df0f2ed91282'
                            }
                        }
                    ]
                },
                {
                    A: '1844554864650240.386311',
                    B: '1739288535918240.386311',
                    AName: '内部墙-290mm',
                    BName: '内部墙-290mm',
                    changeAttributes: [
                        {
                            A: {
                                key: '_GeoFeature',
                                value: '36aafeb9916a28c5f0245beb470203ff'
                            },
                            B: {
                                key: '_GeoFeature',
                                value: '0b5cc9398a2c40049076a86aaeba5104'
                            }
                        }
                    ]
                },
                {
                    A: '1844554864650240.389601',
                    B: '1739288535918240.389601',
                    AName: '外部墙02-290mm',
                    BName: '外部墙02-290mm',
                    changeAttributes: [
                        {
                            A: {
                                key: '尺寸标注-体积',
                                value: '12.081743'
                            },
                            B: {
                                key: '尺寸标注-体积',
                                value: '12.788183'
                            }
                        },
                        {
                            A: {
                                key: '尺寸标注-面积',
                                value: '42.240495'
                            },
                            B: {
                                key: '尺寸标注-面积',
                                value: '44.676495'
                            }
                        },
                        {
                            A: {
                                key: '_GeoFeature',
                                value: '30de44713eab72ef51b413a3127026fc'
                            },
                            B: {
                                key: '_GeoFeature',
                                value: '05300aeb3c989447012612e3b75d16a4'
                            }
                        }
                    ]
                }
            ]
        };

        this.handleData(temp);
        // console.log(this.fomatResult);
        var prev = '442d9ff3cbe54059bae2bc5c848df9ce',
            latest = '0fef986344124e479b0ed002a84e1ab7',
            compare = '02cb8da49b014ec1a3edfc3a0d24fdbb';
        var BimfaceLoaderConfig = new BimfaceSDKLoaderConfig();
        BimfaceLoaderConfig.viewToken = latest;
        BimfaceSDKLoader.load(BimfaceLoaderConfig, onSDKLoadSucceeded);

        let me = this;
        function onSDKLoadSucceeded(viewMetaData) {
            // 加载修改后模型
            var WebAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
            var view1 = (WebAppConfig.domElement = document.querySelector('#lastView'));
            WebAppConfig.viewToken = viewMetaData.viewToken;

            // 开启Hover效果
            WebAppConfig.enableHover = true;
            // 选择工具条显示的按钮
            WebAppConfig.Buttons = ['Home', 'RectangleSelect', 'Measure', 'Section', 'Property', 'Information'];
            latest = new Glodon.Bimface.Application.WebApplication3D(WebAppConfig);
            latest.addView(viewMetaData.viewToken);
            latest.addEventListener('ViewAdded', function() {
                BimfaceLoaderConfig.viewToken = prev;
                BimfaceSDKLoader.load(BimfaceLoaderConfig, function(viewMetaData) {
                    // 加载修改前模型
                    var WebAppConfig2 = new Glodon.Bimface.Application.WebApplication3DConfig();
                    var view2 = (WebAppConfig2.domElement = document.querySelector('#prevView'));
                    console.log(view2);
                    WebAppConfig2.viewToken = viewMetaData.viewToken;

                    // 开启Hover效果
                    WebAppConfig2.enableHover = true;
                    prev = new Glodon.Bimface.Viewer.Viewer3D(WebAppConfig2);
                    prev.addView(viewMetaData.viewToken);
                    prev.addEventListener('ViewAdded', function() {
                        me.correspond(latest, prev, view1, view2);
                    });
                });
            });
        }
    },
    methods: {
        correspond(latest, prev, view1, view2) {
            window.latestViewer = latest.getViewer();
            window.prev = prev;
            var state, focus;
            let me = this;

            var prevViewer = prev.getViewer();
            //考虑到死循环的影响，不能同时监听render事件，因此以鼠标所在位置模型的监听为主
            document.querySelector('.lzx_container').addEventListener('mousemove', function(e) {
                if (focus == undefined) {
                    var width = document.querySelector('#lastView').offsetWidth;
                    if (e.clientX > width) {
                        focus = 1;
                        latestViewer.removeEventListener('Rendered', me.view1Bind);
                        prev.addEventListener('Rendered', me.view2Bind);
                    } else {
                        focus = 0;
                        prev.removeEventListener('Rendered', me.view2Bind);
                        latestViewer.addEventListener('Rendered', me.view1Bind);
                    }
                }
            });

            view1.addEventListener('mouseover', function(e) {
                if (focus == 0) {
                    return;
                }
                focus = 0;
                // 解绑与重新绑定事件，同步新旧模型的Rendered
                prev.removeEventListener('Rendered', me.view2Bind);
                latestViewer.addEventListener('Rendered', me.view1Bind);
            });
            view2.addEventListener('mouseover', function() {
                if (focus == 1) {
                    return;
                }
                focus = 1;
                // 解绑与重新绑定事件，同步新旧模型的Rendered
                latestViewer.removeEventListener('Rendered', me.view1Bind);
                prev.addEventListener('Rendered', me.view2Bind);
            });
            // 同步新旧模型的Hover事件
            prev.addEventListener('ComponentsHoverChanged', function(e) {
                latestViewer.getViewer().modelManager.sceneState.setHoverId(e.objectId);
            });
            latestViewer.addEventListener('ComponentsHoverChanged', function(e) {
                prev.getViewer().modelManager.sceneState.setHoverId(e.objectId);
            });
            let ViewerEvent = Glodon.Bimface.Viewer.Viewer3D;
            latestViewer.setCameraAnimation(false);
            prev.setCameraAnimation(false);
        },
        handleData(data) {
            let me = this;
            if (data.newsNameMap) {
                for (var i = 0; i < data.newsNameMap.length; i++) {
                    for (var j in data.newsNameMap[i]) {
                        for (var k in data.newsNameMap[i][j]) {
                            me.fomatResult.newItems.push({ name: data.newsNameMap[i][j][k], id: k, diffType: 'NEW' });
                        }
                    }
                }
            }
            if (data.deletesNameMap) {
                for (var i = 0; i < data.deletesNameMap.length; i++) {
                    for (var j in data.deletesNameMap[i]) {
                        for (var k in data.deletesNameMap[i][j]) {
                            me.fomatResult.deleteItems.push({ name: data.deletesNameMap[i][j][k], id: k, diffType: 'DELETE' });
                        }
                    }
                }
            }
            if (data.changes) {
                for (var i = 0; i < data.changes.length; i++) {
                    me.fomatResult.changeItems.push({
                        diffType: 'CHANGE',
                        name: data.changes[i]['AName'],
                        id: data.changes[i]['A'].split('.')[1]
                    });
                }
            }
        },
        handleChange(val) {
            console.log(val);
        },
        view1Bind(data) {
            //用新模型的状态更新旧模型状态
            let latestState = latestViewer.getCurrentState();
            prev.setState(latestState);
            prev.getViewer().camera.up.copy(latestViewer.getViewer().camera.up);
        },
        view2Bind(data) {
            //用旧模型的状态更新新模型状态
            let prevState = prev.getCurrentState();
            latestViewer.setState(prevState);
            latestViewer.getViewer().camera.up.copy(prev.getViewer().camera.up);
        },
        handleLocation(type, id) {
            if (type === 'add') {
                // 高亮选中构件
                latestViewer.setSelectedComponentsById([id]);
                // 定位
                latestViewer.zoomToSelectedComponents();
                this.view1Bind();
            } else if (type === 'delete') {
                // 高亮选中构件
                prev.setSelectedComponentsById([id]);
                // 定位
                prev.zoomToSelectedComponents();
                this.view2Bind();
            } else {
                // 高亮选中构件
                latestViewer.setSelectedComponentsById([id]);
                // 定位
                latestViewer.zoomToSelectedComponents();
                this.view1Bind();
                prev.setSelectedComponentsById([id]);
            }
        }
    }
};
</script>

<style scoped>
.lzx_container {
    display: flex;
}
.lzx_container #prevView,
.lzx_container #lastView {
    width: 42%;
    height: 83vh;
    background-color: #ddd;
    position: relative;
    overflow: hidden;
}
.lzx_container #lastView {
    background-color: #fff;
}
.side {
    width: 16%;
    height: 83vh;
    background-color: #fff;
    padding: 0 10px;
    overflow-y: scroll;
}
.side::-webkit-scrollbar {
    /*高宽分别对应横竖滚动条的尺寸*/
    width: 10px;
    height: 10px;
}
/* 滚动条中的小方块处理 */
.side::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #eee;
}
/* 滚动条滚动的轨道 */
.side::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #fff;
}
.side .item {
    height: 36px;
    line-height: 36px;
    padding-left: 8px;
}
.side .item:hover {
    background-color: #11dab7;
    color: white;
    cursor: pointer;
}
</style>

<style>
.content {
    overflow: auto;
}
</style>
